<template>
    <div>
        <Modal :closable="false" :mask-closable="false" v-model="isApproval" :title="'查看审批'">
            <div v-if="isApproval" class="view-approval">
                <Form ref="formItem" :model="formItem" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="标题">
                                <span>{{formItem.Title}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="审批项目">
                                <span>{{formItem.GroupName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="时间">
                                <span>{{formItem.CreateTime}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="状态">
                                <span v-if="formItem.State ==0">驳回</span>
                                <span v-else-if="formItem.State ==1">审批中</span>
                                <span v-else-if="formItem.State ==2">审结</span>
                                <span v-else-if="formItem.State ==3">作废</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}" v-if="formItem.UploadPic">
                            <FormItem label="图片">
                                <div class="wrap-img" >
                                    <img :src="formItem.UploadPic" alt>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}" v-if="formItem.UploadFile">
                            <FormItem label="文件">
                                <div >
                                    <a :href="formItem.UploadFile">下载</a>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}" v-if="formItem.Reason">
                            <FormItem label="申请原因">
                                <span >{{formItem.Reason}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 22}" v-if="type == 'view'">
                            <FormItem label="备注">
                                <i-input type="textarea" v-model="mark"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <FormItem label="审批流程">
                            <ul>
                                <li>
                                    <i-col :lg="{ span: 24}" class="approval-user-wrap">
                                        <div class="approval-user-img">
                                            <div class="approval-user-default">
                                                <p>我</p>
                                            </div>
                                        </div>
                                        <div class="approval-user-item">
                                            <p>
                                                <span class="approval-user-item-name">我</span>
                                                <span class="approval-user-item-type">( 发起审批 )</span>
                                                <span class="approval-user-item-time">{{formItem.CreateTime}}</span>
                                            </p>
                                        </div>
                                        <div class="approval-user-item-des">{{formItem.Reason}}</div>
                                    </i-col>
                                </li>
                                <li v-for="(item,index) in approvalUser" :key="index">
                                    <i-col :lg="{ span: 24}" class="approval-user-wrap approval-user-border">
                                        <div class="approval-user-img">
                                            <img :src="item.UserPic" v-if="item.UserPic">
                                            <div v-else class="approval-user-default">
                                                <p>{{item.ApprovedUserName}}</p>
                                            </div>
                                        </div>
                                        <div class="approval-user-item">
                                            <p>
                                                <span class="approval-user-item-name">{{item.ApprovedUserName}}</span>
                                                <span class="approval-user-item-type"
                                                      v-if="item.OptionType ==1">( 通过 )</span>
                                                <span class="approval-user-item-type" v-else>( 驳回 )</span>
                                                <span class="approval-user-item-time">{{item.CreateTime}}</span>
                                            </p>
                                        </div>
                                        <div class="approval-user-item-des">{{item.ApprovedUserSay}}</div>
                                    </i-col>
                                </li>
                            </ul>
                        </FormItem>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">返回</Button>
                <Button size="large" v-if="isButton" type="info" @click="handleBtnClick('resolve')">同意</Button>
                <Button size="large" v-if="isButton" type="error" @click="handleBtnClick('reject')">驳回</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {getItemInfo} from './service';

    export default {
        name: 'ViewApproval',
        props: ['isApproval', 'id', 'type'],
        data() {
            return {
                formItem: {},
                mark:'',
                approvalUser: [],
                isButton: false

            };
        },
        mounted() {
            getItemInfo({
                fid: this.id
            }).then(res => {
                this.formItem = res.data.ComFlow;
                this.approvalUser = res.data.Detail;
            });
            if (this.type == 'view') {
                this.isButton = true
            }

        },
        methods: {
            handleClose() {
                this.$emit('handleCloseViewApproval');
            },
            handleBtnClick(type) {
                this.$emit('handleSubmit', type,this.mark)
            }

        }
    };
</script>

<style lang="less" scoped>
    .wrap-img {
        img {
            width: 60px;
            height: 60px;
        }
    }

    .approver-user {
        display: flex;

        li {
            margin: 0 10px;
            position: relative;

            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }

            .user-img {
                text-align: center;
            }

            .default-user-img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #1890ff;
                text-align: center;
                padding-top: 20px;
            }

            .default-user-title {
                color: #fff;
                width: 60px;
                display: block;
                line-height: 15px;
                margin-bottom: 36px;
            }
        }

        li::after {
            content: '';
            width: 20px;
            height: 10px;
            border-bottom: 1px solid #ccc;
            position: absolute;
            top: 20px;
            right: -20px;
        }

        li:last-child::after {
            content: '';
            position: absolute;
            border: none;
        }
    }

    .approval-user-wrap {
        position: relative;

        div {
            float: left;
        }
    }

    .approval-user-item-des {
        margin-left: 10px;
    }

    .approval-user-border {
        margin-top: 30px;
    }

    .approval-user-border ::after {
        content: '';
        width: 100px;
        height: 34px;
        position: absolute;
        top: -34px;
        left: 30px;
        border-left: 1px solid #ccc;
    }

    .approval-user-item {
        width: 80%;
        margin-left: 10px;

        .approval-user-item-type {
            margin-left: 5px;
        }

        .approval-user-item-time {
            float: right;
        }
    }

    .approval-user-img {
        width: 60px;
        height: 60px;

        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }

    .approval-user-default {
        padding-top: 20px;
        width: 60px;
        line-height: 16px;
        height: 60px;
        text-align: center;
        border-radius: 50%;
        background: #1890ff;
        color: #fff;
    }

    .view-approval {
        max-height: 587px;
        padding-right: 10px;
        overflow-y: scroll;
    }
</style>

